<template>
	<view class="lawDetails">
		<view class="article-container">
		    <!-- 文章标题 -->
		    <view class="article-title">{{ articleData.title }}</view>
		    
		    <!-- 作者信息 -->
		    <view class="author-info">
		      <view class="author-meta">
		        <text class="author-name">{{ articleData.author.name }}</text>
		        <text class="publish-time">{{ articleData.publishTime }}</text>
		      </view>
		    </view>
		    
		    <!-- 文章内容 -->
		    <view class="article-content">
		      <rich-text :nodes="articleData.content"></rich-text>
		    </view>
		    
		    <!-- 底部操作栏 -->
		    <view class="action-bar">
		      <view class="action-item" @click="handleShare">
		        <!-- <uni-icons type="share" size="24" color="#666"></uni-icons> -->
		        <text class="action-text">分享</text>
		      </view>
		      <view class="action-item" @click="handleCollect">
		        <!-- <uni-icons :type="isCollected ? 'star-filled' : 'star'" size="24" :color="isCollected ? '#ffca3e' : '#666'"></uni-icons> -->
		        <text class="action-text">{{ isCollected ? '已收藏' : '收藏' }}</text>
		      </view>
		      <view class="action-item" @click="handleLike">
		        <!-- <uni-icons :type="isLiked ? 'heart-filled' : 'heart'" size="24" :color="isLiked ? '#f56c6c' : '#666'"></uni-icons> -->
		        <text class="action-text">{{ likeText }}</text>
				
		      </view>
		    </view>
		  </view>
	</view>
	
</template>

<script lang="ts" setup>
	import {ref, computed} from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	
	onLoad((options: { id?: string }) => {
	  console.log('页面加载，参数:', options)
	  // fetchContentData 方法名，可换
	  // fetchContentData('行测')
	})
	
	
	// 模拟文章数据
	interface Author {
	  id: number
	  name: string
	  avatar: string
	}
	
	interface Article {
	  id: number
	  title: string
	  author: Author
	  publishTime: string
	  content: string
	  likeCount: number
	  isCollected: boolean
	  isLiked: boolean
	}
	
	
	const articleData  = ref<Article>({
		id: 1,
		  title: 'UniApp Vue3 + TypeScript 开发最佳实践',
		  author: {
		    id: 1,
		    name: '作者：中软睿达',
		    avatar: '/static/images/avatar.jpg'
		  },
		  publishTime: '2025-04-26 17:23',
		  content: `
		    <p>UniApp 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝）、快应用等多个平台。</p>
		    <p>Vue3 带来了许多新特性，如 Composition API、更好的 TypeScript 支持等。本文将介绍如何在 UniApp 中使用 Vue3 和 TypeScript 进行开发。</p>
		    <h3>1. 项目初始化</h3>
		    <p>使用 Vue CLI 创建 UniApp 项目：</p>
		    <p>vue create -p dcloudio/uni-preset-vue my-project</p>
			<p>
				<img src="https://foruda.gitee.com/avatar/1715784363016507486/5318571_ding_xiao_dou_1715784362.png"></img>
			</p>
		    <h3>2. TypeScript 配置</h3>
		    <p>安装必要的依赖：</p>
		    <p>npm install --save-dev typescript @types/node</p>
		    <p>创建 tsconfig.json 文件并进行适当配置。</p>
		  `,
		  likeCount: 128,
		  isCollected: false,
		  isLiked: false
	})
	
	// 收藏状态
	const isCollected = ref(articleData.value.isCollected)
	
	// 点赞状态和数量
	const isLiked = ref(articleData.value.isLiked)
	const likeCount = ref(articleData.value.likeCount)
	
	// 计算属性：点赞文本
	const likeText = computed(() => {
	  return isLiked.value ? `已点赞(${likeCount.value})` : `点赞(${likeCount.value})`
	})
	
	// 分享处理
	const handleShare = () => {
	  uni.showToast({
	    title: '分享功能待实现',
	    icon: 'none'
	  })
	}
	
	// 收藏处理
	const handleCollect = () => {
	  isCollected.value = !isCollected.value
	  uni.showToast({
	    title: isCollected.value ? '收藏成功' : '已取消收藏',
	    icon: 'none'
	  })
	}
	
	// 点赞处理
	const handleLike = () => {
	  isLiked.value = !isLiked.value
	  likeCount.value = isLiked.value ? likeCount.value + 1 : likeCount.value - 1
	  uni.showToast({
	    title: isLiked.value ? '点赞成功' : '已取消点赞',
	    icon: 'none'
	  })
	}
	
</script>

<style lang="scss" scoped>
.lawDetails {
	width: 100%;
	padding: 30rpx;
	background: #fff;
	// background: pink;
}
	
.article-container {
  padding: 20rpx 30rpx;
  background-color: #fff;
  min-height: 100vh;
  box-sizing: border-box;
  padding-bottom: 120rpx; // 给底部操作栏留空间
}

.article-title {
  font-size: 40rpx;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 30rpx;
  color: #333;
}

.author-info {
  display: flex;
  margin-bottom: 40rpx;
  
  .author-meta {
	width: 100%;
    display: flex;
	justify-content: space-between;
	align-items: center;
    
    .author-name {
      font-size: 28rpx;
      color: #333;	  
    }
    
    .publish-time {
      font-size: 24rpx;
      color: #999;
    }
  }
}

.article-content {
  font-size: 30rpx;
  line-height: 1.8;
  color: #333;
  
  // 为 rich-text 内容添加样式
  :deep(p) {
    margin-bottom: 30rpx;
  }
  
  :deep(h3) {
    font-size: 34rpx;
    margin: 40rpx 0 20rpx;
    color: #222;
  }
  
  :deep(pre) {
    background-color: #f5f5f5;
    padding: 20rpx;
    border-radius: 8rpx;
    overflow-x: auto;
    margin-bottom: 30rpx;
  }
}

.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top: 1rpx solid #f0f0f0;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 100;
  
  .action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    .action-text {
      font-size: 24rpx;
	  color: #2c8cfe;
      margin-top: 5rpx;
	  font-weight: bold;
    }
  }
}
</style>
